<template>
  <div style="height: 350px; display: flex; gap: 20px;">
    <!-- 左侧表格 -->
    <div style="flex: 0.24;">
      <h3>{{ $t('c.parameter') }}</h3>
      <el-table :data="leftTableData" border style="width: 100%;height: 450px;" v-loading="leftLoading">
        <el-table-column prop="name" :label="$t('cmmParam.parameterName')" />
        <el-table-column prop="value" :label="$t('cmmParam.parameterValue')" />
      </el-table>
    </div>

    <!-- 右侧表格 -->
    <div style="flex: 0.76;">
      <h3>{{ $t('c.testingItems') }}</h3>
      <el-table :data="rightTableData" border style="width: 100%;height: 450px;" v-loading="rightLoading">
        <el-table-column prop="itemName" :label="$t('cmmItem.itemName')" />
        <el-table-column prop="standardValue" :label="$t('cmmItem.standardValue')" />
        <el-table-column prop="idsymbol" :label="$t('cmmItem.idsymbol')" />
        <el-table-column prop="unit" :label="$t('cmmItem.unit')" />
        <el-table-column prop="usl" :label="$t('cmmItem.usl')" />
        <el-table-column prop="lsl" :label="$t('cmmItem.lsl')" />
        <el-table-column prop="actualValue" :label="$t('cmmItem.actualValue')" />
        <el-table-column prop="checkResult" :label="$t('cmmItem.checkResult')" />
      </el-table>
    </div>
  </div>
</template>

<script setup name="cmmData">
import { ref, watch } from 'vue'
import { listCksCMMItem, listCksCMMParam } from '@/api/business/ckscmmrecord'

const props = defineProps({
  batchCode: {
    type: String,
    default: ''
  }
})

// 定义加载状态
const leftLoading = ref(false)
const rightLoading = ref(false)

// 定义表格数据
const leftTableData = ref([])
const rightTableData = ref([])

// 获取左侧表格数据
const getLeftTableData = async (batchCode) => {
  if (!batchCode) return
  leftLoading.value = true
  try {
    listCksCMMParam({'batchCode':batchCode}).then(res => {
    const { code, data } = res
    if (code == 200) {
      leftTableData.value = data
    }
  })
  } catch (error) {
    console.error('获取左侧表格数据失败:', error)
  } finally {
    leftLoading.value = false
  }
}

// 获取右侧表格数据
const getRightTableData = async (batchCode) => {
  if (!batchCode) return
  rightLoading.value = true
  try {
    listCksCMMItem({'batchCode':batchCode}).then(res => {
    const { code, data } = res
    if (code == 200) {
      rightTableData.value = data
      console.log(data);
      
    }
  })
  } catch (error) {
    console.error('获取右侧表格数据失败:', error)
  } finally {
    rightLoading.value = false
  }
}

// 根据batchCode获取所有表格数据
const getListInfo = (batchCode) => {
  getLeftTableData(batchCode)
  getRightTableData(batchCode)
}

// 监听batchCode变化
watch(
  () => props.batchCode,
  (newVal, oldValue) => {
    if (newVal) {
      console.log(newVal);
      
      getListInfo(newVal)
    }
  },
  {
    immediate: true,
    deep: true
  }
)
</script>

<style scoped>
/* 可以添加额外的样式 */
</style>